<template>
	<view class="containers">
		<view class="open-more">
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					会议室编号
				</view>
				<view class="u-flex u-row-start" @click="open('会议室编号','code')">
					<text class="rigtfont u-m-r-20">{{code}}</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom" @click="open('会议室名称','groupName')">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					会议室名称
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">{{datas.groupName != null?datas.groupName:'未设置'}}</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>				
			</view>
			<view class="u-flex u-row-between u-border-bottom" @click="open('会议室通知','notice')">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					会议室通知
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">{{datas === null?'未设置':datas.notice}}</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>		
			<view class="u-flex u-row-between u-border-bottom" @click="open('会议时间','meetingTime')">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					会议时间
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">{{datas === null?'无限制':datas.meetingTime}}</text><text v-if="datas != ''">天</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom" @click="getQrcode">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					会议二维码
				</view>
				<view class="u-flex u-row-start">
					
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			
			
			<view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					消息免打扰
				</view>
				<view class="u-flex u-row-start">
					<switch @change="function (e){return change(e,'disturbFlag')}" v-model="checked" v-if="datas.disturbFlag" checked class="kaiqi" />			
					<switch @change="function (e){return change(e,'disturbFlag')}"  v-model="checked" v-else class="kaiqi" />
				</view>
			</view>
			<!-- <view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					邀请
				</view>
				<view class="u-flex u-row-start">
					<switch @change="function (e){return change(e,'inviteFlag')}" v-model="checked" v-if="datas.inviteFlag" checked class="kaiqi" />
					<switch @change="function (e){return change(e,'inviteFlag')}"  v-model="checked" v-else class="kaiqi" />
				</view>
			</view> -->
			<view class="u-flex u-row-between u-border-bottom" v-if="leader && setUser !== null">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					移除
				</view>
				<view class="u-flex u-row-start">
					<switch @change="function (e){return change(e,'removeFlag')}"  v-model="checked" class="kaiqi" />
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom" v-if="leader && setUser !== null">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					上锁/解锁
				</view>
				<view class="u-flex u-row-start">
					<switch @change="function (e){return change(e,'lockFlag')}" v-model="checked" v-if="setUser.lockFlag" checked class="kaiqi" />
					<switch @change="function (e){return change(e,'lockFlag')}"  v-model="checked" v-else class="kaiqi" />
				</view>
			</view>
			<view class="u-flex u-row-between u-border-bottom" v-if="leader && setUser !== null">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					屏蔽/解屏
				</view>
				<view class="u-flex u-row-start">
				<switch @change="function (e){return change(e,'shieldFlag')}" v-model="checked" v-if="setUser.shieldFlag" checked class="kaiqi" />
				<switch @change="function (e){return change(e,'shieldFlag')}"  v-model="checked" v-else class="kaiqi" />
				</view>
			</view>
			<!-- <view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					收藏
				</view>
				<view class="u-flex u-row-start">
					<switch @change="function (e){return change(e,'favoritesFlag')}" v-model="checked" v-if="datas.favoritesFlag" checked class="kaiqi" />
					<switch @change="function (e){return change(e,'favoritesFlag')}"  v-model="checked" v-else class="kaiqi" />
				</view>
			</view> -->
			<!-- <view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					邀请进公社
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">选择功能</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view> -->
			<!-- <view class="u-flex u-row-between u-border-bottom">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					管理员权限
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">对谁可见</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>AA
			</view> -->
			<view class="u-flex u-row-between u-border-bottom" v-if="setUser !== null">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					我的名称
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">{{setUser != null && setUser.info != null ?setUser.info.cardName:'未设置'}}</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
			<!-- <view class="u-flex u-row-between u-border-bottom" v-if="user !== ''">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					专业
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">{{datas.userProfession || '未设置'}}</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view> -->
			<view class="u-flex u-row-between" v-if="setUser !== null">
				<view class="u-m-l-20 u-m-b-20 u-m-t-20">
					我的昵称
				</view>
				<view class="u-flex u-row-start">
					<text class="rigtfont u-m-r-20">{{setUser != null ?setUser.name:'未设置'}}</text>
					<u-icon name="arrow-right" color="#9EA2B0" size="28" class="u-m-r-20"></u-icon>
				</view>
			</view>
		
		</view>
		<u-button class="button-sub" @click="dismiss">解散/退出</u-button>
		<!--询价报价-->
		<u-popup v-model="show" mode="center">
			<view class="view-popup u-p-20">
				<view style="margin-bottom: 20upx;">{{editTitle}}</view>
				<u-input v-model="value" placeholder="请输入" :border="true" />
				<view style="display: flex;margin-top: 20upx;">
					<u-button style="height: 60upx;" @click="show = false">取消</u-button>
					<u-button style="height: 60upx;" @click="onClick" type="primary">确认</u-button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default{
		name: "chat-setting",
		props: {
			datas:{
				type:Object,
				default:{
					"disturbFlag": false,
					"groupName": "",
					"lockFlag": false,
					"meetingTime": 0,
					"notice": "",
					"removeFlag": false,
					"shieldFlag": false,
					"targetUserId": 0,
					"teamChatId": ""
				}
			},
			setUser:Object,
			id: {
				type: [Number, String],
				default: ''
			},
			user: {
				type: [Number, String],
				default: ''
			},
			leader: {
				type:Boolean,
				default: false
			},
			code: {
				type:[Number, String],
				default:  ''
			},
			group: {
				type: Boolean,
				default: false
			},
			height: 20,
			checked: true
		},
		data(){
			return{
				show:false,
				field:'',
				editTitle:'',
				value:'',
				list:'',
				disturbFlag:false,
				info:{},
				lockFlag:false,
				controlStatus: false
			}
		},
		created() {
			this.initPage();
		},		
		watch: {
			setUser(val) {
				console.log("setUser",val)
			}
		},
		methods: {
			initPage(){
			},
			change(e,field) {
				let model = this.datas;
				model[field] = e.detail.value;
				if(field != 'shieldFlag') model['shieldFlag'] = this.setUser.shieldFlag;
				if(field != 'lockFlag') model['lockFlag'] = this.setUser.lockFlag;
				model['teamChatId'] = this.id;	
				console.log(model);
				this.datas = model;
				 this.$emit('click', {
				 	model: model
				 })
			},
			open(title,field){
				if(this.leader){
				this.value = '';
				this.editTitle = title;
				this.field = field;
				this.show = true;					
				}
			},
			dismiss(){
				uni.showModal({
					title:"提示",
					content:"是否确认解散/退出该会议",
					success: (res) => {
						if(res.confirm){
							this.$emit('click', {
								model: 'dismiss'
							})
						}
					}
				})
			},
			onClick() {
				this.show = false;	
				let model = {};
				if(this.datas){					
					model = this.datas;
				}else{					
					model = {
						"disturbFlag": false,
						"groupName": "",
						"lockFlag": false,
						"meetingTime": 0,
						"notice": "",
						"removeFlag": false,
						"shieldFlag": false,
						"targetUserId": 0,
						"teamChatId": ""
					};
				}
				if(this.field != 'shieldFlag') model['shieldFlag'] = this.setUser.shieldFlag;
				if(this.field != 'lockFlag') model['lockFlag'] = this.setUser.lockFlag;
				model[this.field] = this.value;
				model['teamChatId'] = this.id;
				
				 this.$emit('click', {
				 	model: model
				 })
			},
			getQrcode(){
				this.$emit('getQrcode')
			}
		}
		
	}
</script>

<style scoped lang="scss">
  .open-more {
  	// margin-bottom: 100rpx;
	margin:50rpx auto 0 auto;
	width: 710rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
  	
  	.rigtfont {
  		font-size: 30rpx;
  		color: #9EA2B0;
  	}
  
  	.kaiqi {
  		transform: scale(0.6) !important;
  	}
  }
  .button-sub {
  	width: 662rpx;
  	height: 80rpx;
  	font-size: 32rpx;
  	margin:50rpx auto;
  	background: #ab61ff;
  	border-radius: 40rpx;
  	border: 0;
  	color: #fff;
  
  	&.u-hairline-border:after {
  		border: 0;
  	}
  }
  .btn-agree{
  	width: 60%;
  	height: 60upx;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	background: #4B9CFF;
  	color: #fff;
  	border-radius: 6upx;
  	font-size: 28upx;
  }
</style>

